<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link type="text/css" rel="styleSheet"  href="google-style.css" />
    <link type="text/css" rel="styleSheet" href="basic.css" />

</head>

<body>
    <div class="container">
        <div class="header">
            <div class="header-left">
                <div class="header-style">
                    <a href="#">Google大全</a>
                </div>
                <div class="header-style">
                    <a href="#">商店</a>
                </div>
            </div>
            <div class="header-right">
                <div class="header-style">
                    <a href="#">Gmail</a>
                </div>
                <div class="header-style">
                    <a href="#">图片</a>
                </div>
                <div class="padding-15">
                </div>
                <div class="svg-out-box">
                    <div class="svg-box" id="svg-box">
                        <svg class="svg" focusable="false" viewBox="0 0 24 24">
                            <path
                                d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z">
                            </path>
                        </svg>
                    </div>
                </div>
                <div class="header-style">
                    <button type="button" class="btn btn-primary">登录</button>
                </div>
            </div>

            <!-- app-board -->
            <div class="app-board" id = "app-board">
                <!-- <div class="app-box">
                    <div class="app">
                        <span style="background-position: 0 -2622px;"></span>
                    </div>
                    <span class="app-info">Google 帐号</span>
                </div> -->
            </div>

            <script>
                let appStr = "";
                const appArr    = ["Google帐号","搜索","地图","Youtube","play","新闻","Gmail",
            "Meet", "Chat", "通讯录","云端硬盘","日历","翻译","相册","Duo","购物","财经","文档","表格",
            "幻灯片", "图书", "Blogger", "环聊", "Keep", "JamBoard","Google地球","收藏","艺术与文化",
            "Google Ads", "Google播客", "Stadia", "差旅","表单"];
                const appDisArr = [2622,1035,1311,0,759,2760,1104,2691,138,1587,2001,621,
            2277,414,897,207,2208,69,966,276,3036,1518,2139,1173,1794,2553,2346,690,345,1725,2967,
            1449,2415];
                
                for (let i = 0; i <= 15; i++) {
                    if (i == 15) {
                        appStr += '<div class="app-box line"> <div class="app" style="background-position: 0 -' + appDisArr[i] + 'px;">'
                            + '<span></span>'
                            + '</div>' + '<span class="app-info">' +
                            appArr[i] + '</span> </div> </div>';
                        for (let j = 0; j < 2; ++j) {
                            appStr += '<div class="app-empty-box line"> <div class="app" style="background:none">'
                                + '<span></span>'
                                + '</div>' + '<span class="app-info">'
                                + '</span> </div> </div>';
                        }
                    } else {
                        appStr += '<div class="app-box"> <div class="app" style="background-position: 0 -' + appDisArr[i] + 'px;">'
                            + '<span></span>'
                            + '</div>' + '<span class="app-info">' +
                            appArr[i] + '</span> </div> </div>';
                    }                    
                }
                for (let i = 16; i < appArr.length; i++) {
                    appStr += '<div class="app-box"> <div class="app" style="background-position: 0 -' + appDisArr[i] + 'px;">'
                        + '<span></span>'
                        + '</div>' + '<span class="app-info">' +
                        appArr[i] + '</span> </div> </div>';
                }

                appStr += '<div class="app-empty-box"> <div class="app" style="background:none">'
                        + '<span></span>'
                        + '</div>' + '<span class="app-info">'
                        + '</span> </div> </div>';

                //更多产品
                appStr += '<div class="more">'
                + '<input class="more-box" value = "更多Google应用/产品" role = "button" tabindex = "0" type = "submit" >'
                + '</div >';
                
                console.log(appStr);

                document.getElementById("app-board").innerHTML = appStr;
            </script>

            <script>
                let svgbtn = document.getElementById("svg-box");
                let appBoard = document.getElementById("app-board");
                console.log(svgbtn, appBoard);

                svgbtn.onclick = function () { 
                    appBoard.style.display = "flex";
                    event.stopPropagation(); //阻止事件冒泡
                }
                //点击其他地方关闭div
                document.onclick = function () {
                    appBoard.style.display = "none";
                    event.stopPropagation(); //阻止事件捕获
                }
                
            </script>
        </div>
        <div class="center">
            <div class="left"></div>
            <div class="main">
                <img class = "google-img" src="img/google.jpg" alt="">
                <div class="search-box">
                    <div class="icon1">
                        <svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path
                                d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
                            </path>
                        </svg>
                    </div>
                    <div class="input">
                        <form action="http://www.baidu.com/baidu">
                            <input name="word" type="search" />
                        </form>
                    </div>
                    <div class="icon2">
                        <a href="">
                            <svg class="goxjub" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path fill="#4285f4"
                                    d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z">
                                </path>
                                <path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
                                <path fill="#fbbc05" d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z">
                                </path>
                                <path fill="#ea4335"
                                    d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z">
                                </path>
                            </svg>
                        </a>
                    </div>
                </div>

                <div class="try-box">
                    <div class="left-box">
                        <input class="box box1" value="Google 搜索" role="button" tabindex="0" type="submit">
                    </div>
                    <div class="right-box">
                        <input class="box box2" value="&nbsp手气不错&nbsp" role="button" tabindex="0" type="submit">
                    </div>
                </div>

                <div class="language">
                    Google 提供： <a href="#">繁體中文</a>
                </div>
            </div>
            <div class="right"></div>
        </div>
        <div class="footer">
            <div class="info-box">
                <div class="button-info">
                    <a href="">广告</a>
                </div>
                <div class="button-info">
                    <a href="">商务</a>
                </div>
                <div class="button-info">
                    <a href="">Google 搜索的运作方式</a>
                </div>
            </div>
            <div class="info-box">
                <div class="button-info">
                    <a href="">隐私权</a>
                </div>
                <div class="button-info">
                    <a href="">条款</a>
                </div>
                <div class="button-info">
                    <a href="">设置</a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>